<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat with Typing Effect</title>
  <style>
    /* 全局样式 */
    body {
      background-color: #0a0a0a; /* 深色背景 */
      color: #888; /* 科技灰色字体 */
      font-family: 'Courier New', monospace; /* 等宽字体，更具科技感 */
      margin: 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    /* 聊天框样式 */
    #chat-box {
      width: 400px;
      height: 500px;
      border: 2px solid #666; /* 科技灰色边框 */
      padding: 15px;
      overflow-y: scroll;
      background-color: #1a1a1a; /* 深灰色背景 */
      box-shadow: 0 0 10px rgba(102, 102, 102, 0.5); /* 发光效果 */
      border-radius: 10px; /* 圆角 */
    }

    /* 自定义滚动条 */
    #chat-box::-webkit-scrollbar {
      width: 10px; /* 滚动条宽度 */
    }

    #chat-box::-webkit-scrollbar-track {
      background: #1a1a1a; /* 滚动条轨道颜色 */
      border-radius: 5px; /* 圆角 */
    }

    #chat-box::-webkit-scrollbar-thumb {
      background: #666; /* 滚动条滑块颜色 */
      border-radius: 5px; /* 圆角 */
      border: 2px solid #1a1a1a; /* 滑块边框 */
    }

    #chat-box::-webkit-scrollbar-thumb:hover {
      background: #888; /* 滑块悬停颜色 */
    }

    /* 消息样式 */
    .message {
      margin-bottom: 15px;
      padding: 10px;
      background-color: #222; /* 消息背景 */
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(102, 102, 102, 0.3); /* 消息发光效果 */
      animation: fadeIn 0.5s ease-in-out; /* 消息淡入动画 */
    }

    /* 输入框区域样式 */
    #input-box {
      margin-top: 20px;
      display: flex;
      gap: 0; /* 去掉间隙，使输入框和按钮融为一体 */
      align-items: center; /* 垂直居中 */
      background-color: #1a1a1a; /* 输入框区域背景 */
      border: 2px solid #666; /* 输入框区域边框 */
      border-radius: 8px; /* 圆角 */
      padding: 5px; /* 内边距 */
      box-shadow: 0 0 10px rgba(102, 102, 102, 0.5); /* 发光效果 */
    }

    /* 输入框样式 */
    #message-input {
      width: 320px; /* 增加宽度 */
      padding: 12px; /* 增加内边距 */
      border: none; /* 去掉边框 */
      background-color: transparent; /* 透明背景 */
      color: #888;
      font-family: 'Courier New', monospace;
      font-size: 14px; /* 调整字体大小 */
      outline: none; /* 去掉聚焦时的默认轮廓 */
      flex-grow: 1; /* 输入框占据剩余空间 */
    }

    #message-input::placeholder {
      color: #444; /* 输入框占位符颜色 */
    }

    #message-input:focus {
      border-color: #888; /* 输入框聚焦时边框颜色 */
    }

    /* 发送按钮样式 */
    #send-button {
      padding: 12px 24px; /* 增加按钮内边距 */
      background-color: #666;
      color: #0a0a0a;
      border: none;
      border-radius: 6px; /* 圆角 */
      cursor: pointer;
      font-family: 'Courier New', monospace;
      font-size: 14px; /* 调整字体大小 */
      font-weight: bold;
      transition: background-color 0.3s ease;
    }

    #send-button:hover {
      background-color: #888; /* 按钮悬停效果 */
    }

    /* 打字效果 */
    @keyframes typing {
      from { width: 0; }
      to { width: 100%; }
    }

    /* 消息淡入动画 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>
<div id="chat-box"></div>
<div id="input-box">
  <input type="text" id="message-input" placeholder="Type a message...">
  <button id="send-button">Send</button>
</div>

<script>
  const url = 'http://localhost:8086/api4xyz';
  const chatBox = document.getElementById('chat-box');
  const messageInput = document.getElementById('message-input');
  const sendButton = document.getElementById('send-button');

  // 创建 EventSource 连接
  const eventSource = new EventSource(url + '/sse/chat');

  // 监听服务器推送的消息
  eventSource.onmessage = function (event) {
    const message = event.data;

    // 创建消息元素
    const messageElement = document.createElement('div');
    messageElement.classList.add('message');
    chatBox.appendChild(messageElement);

    // 打字效果
    let i = 0;
    const typingEffect = setInterval(() => {
      if (i < message.length) {
        messageElement.textContent += message.charAt(i);
        i++;
      } else {
        clearInterval(typingEffect);
      }
    }, 100); // 每100毫秒打一个字

    // 自动滚动到底部
    chatBox.scrollTop = chatBox.scrollHeight;
  };

  // 发送消息到后台
  sendButton.addEventListener('click', () => {
    const message = messageInput.value.trim();
    if (message) {
      fetch(url + '/sse/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `message=${encodeURIComponent(message)}`,
      }).then(() => {
        messageInput.value = ''; // 清空输入框
      });
    }
  });

  // 按回车键发送消息
  messageInput.addEventListener('keypress', (event) => {
    if (event.key === 'Enter') {
      sendButton.click();
    }
  });

  // 处理 SSE 连接错误
  eventSource.onerror = function () {
    console.log('SSE connection error');
    eventSource.close();
  };
</script>
</body>
</html>